<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>树状菜单</title>
    <link rel="stylesheet" href="https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css" />
    <link rel="stylesheet" href="https://static.runoob.com/assets/js/jquery-treeview/screen.css" />

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"></script>
    <script src="https://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
    <style>
        a{
            color: #FF00FF;
        }
    </style>
</head>
<body>
<li class="layui-nav-item"><a href="{:url('Jquery/jlist')}">地区用户列表</a></li>
<h1 id="banner" align="center">jQuery Treeview 简单实例</h1>
<div id="main">
    <ul id="browser" class="filetree treeview-famfamfam">
        {foreach $data as $k=>$vo}
        <li class="closed"><span class="folder">{$vo.region_name}</span>
            {if !empty($vo['childs']) }
            <ul>
                {foreach $vo['childs'] as $kk=>$vv}
                <li class="closed">
                    <span class="folder">{$vv.region_name}</span>
                    {if !empty($vv['childs']) }
                    <ul>
                        {foreach $vv['childs'] as $kkk=>$vs}
                        <li class="closed">
                            <span class="folder">{$vs.region_name}</span>
                        </li>
                        {/foreach}
                    </ul>
                    {/if}
                </li>
                {/foreach}
            </ul>
            {/if}
        </li>
        {/foreach}
    </ul>

   <!-- <button id="add">Add!</button>-->
</div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function(){
        $("#browser").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            }
        });

        $("#add").click(function() {
            var branches = $("<li><span class='folder'>New Sublist</span><ul>" +
                "<li><span class='file'>Item1</span></li>" +
                "<li><span class='file'>Item2</span></li></ul></li>").appendTo("#browser");
            $("#browser").treeview({
                add: branches
            });
        });
    });
</script>
